<template>
    <div>
        <a-radio-group v-model:value="config.customConfig.type" style="margin-left: 5px;">
            <a-radio value="config">{{ i18n('config', '配置') }}</a-radio>
            <a-radio value="file">{{ i18n('file', 'Vue文件') }}</a-radio>
        </a-radio-group>
        <div v-if="config.customConfig.type=='config'" style="margin:10px 0px 0px 10px">
            <a-button @click="editCustomChart()" style="margin-right: 5px;">{{ i18n('config', '配置') }}</a-button>
            <a-tag color="green" v-if="config.customConfig.jsScript">{{ i18n('configured', '已配置') }}</a-tag>
            <a-tag color="red" v-else>{{ i18n('notConfigured', '未配置') }}</a-tag>
        </div>
        <div v-if="config.customConfig.type=='file'" style="margin:10px 0px 0px 10px">
            <a-input v-model:value="config.customConfig.path" :placeholder="i18n('filePath','Vue文件路径')"
                     style="width:90%;margin-right: 5px;"/>
            <a-tooltip>
                <template #title >
                  <span style="width:400px;">
                    {{ i18n('fileTooltip', '提示') }}
                  </span>
                </template>
                <QuestionCircleOutlined/>
            </a-tooltip>
        </div>
    </div>
</template>

<script>
import CustomChartConfig from "./custom-chart-config.vue";
import {Util} from "@lowcode/jpaas-base-lib";

export default {
    name: "custom-config",
    inject: {
        config: {
            default: () => {
                return {};
            }
        }
    },
    methods: {
        i18n(name, text, key) {
            return this.$ti18(name, text, "customChartLang", key);
        },
        editCustomChart() {
            let self = this;
            let conf = {
                component: CustomChartConfig,
                data: {
                    config: this.config,
                },
                curVm: this,
                zIndex: 1000,
                max: true,
                title: this.i18n("customChartConfig", "自定义图表配置")
            }
            Util.open(conf, function (action, jsScript) {
                if (action != 'ok') return;
                self.config.customConfig["jsScript"] = jsScript;
            });
        },
    }
}
</script>

<style scoped>

</style>
